<template>
	<view  @click="showre(null)">
		<z-paging  ref="paging" v-model="list" @query="getList">
			<template #top>
				<uni-nav-bar ref="navBar" statusBar :border="false" backgroundColor="#ffffff" @clickLeft="goBack">
					<template #left>
						<image class="size-32" src="@/static/svg/icon-back.svg" />
					</template>
					<view class="flex center w-full fs-16"><text class="text-color-regular">提现记录</text></view>
				</uni-nav-bar>
			</template>
			<view>
				<view class="top-tip" v-if="userInfo.financialAccountType == 2 && list.length">
					请先下载结算单，确认无误后，点击【确认结算】，平台将在您确认后的3个工作日内完成打款
				</view>
				<view class="menu-list flex item-center justify-center">
					<view class="menu-item" v-for="item in menuList" :key="item.id" @click="changeMenu(item)"
						:class="{'active':item.id == params.withdrawalTypes}">
						{{item.name}}
						<view class="sel-line" v-if="item.id == params.withdrawalTypes"></view>
					</view>
				</view>
				<view class="mt-12 mx-16 p-12 bg-white radius-12" v-for="item in list" :key="item.id">
					<view class="flex justify-between item-center text-color-regular fs-16 font-semibold leading-22">
						<text>{{(item.withdrawalType==1 || item.withdrawalType==4)?'本金提现':item.withdrawalType==2?'佣金提现':item.withdrawalType==3?'补贴提现':''}}</text>
						<text>¥{{item.tradeAmt}}</text>
					</view>
					<view v-if="item.remark" class="mt-8 flex item-center fs-12 text-color-hint">{{ item.remark }}</view>
					<view class="mt-8 flex justify-between item-center fs-12">
						<view class="flex item-center">
							<text class="text-color-hint">{{item.applyTime}}</text>
							<text class="down-text" v-if="item.state!=7 && item.checkFile" @click="download(item.checkFile)">下载结算单</text>
						</view>
						<view class="inline-flex item-center fail-box" @click.stop="showre(item)" v-if="item.state==6">
							<text class="color-primary">提现失败</text>
							<image class="size-16 ml-4" src="@/wallet/static/icon-fail.svg"></image>
							<view class="fail-box-pop" v-if="item.show">
								<!-- <view class="inner-w"> -->
									{{item.refuseReason}}
								<!-- </view> -->
								<!-- <image src="@/wallet/static/icon-delPop.svg" mode="" class="icon-delPop"></image> -->
								
								<!-- <image src="@/wallet/static/icon-delete.svg" mode="" class="icon-fail"></image> -->
								<image src="@/wallet/static/icon-triangle.png" mode="widthFix" class="triangle"></image>
								
							</view>
						</view>
						<view class="inline-flex item-center fail-box" @click.stop="showre(item)" v-else-if="item.state==2">
							<text class="color-primary">审核失败</text>
							<image class="size-16 ml-4" src="@/wallet/static/icon-fail.svg"></image>
							<view class="fail-box-pop" v-if="item.show">
								<!-- <image src="@/wallet/static/icon-delPop.svg" mode="" class="icon-delPop"></image> -->
								<!-- <view class="inner-w"> -->
									{{item.refuseReason}}
								<!-- </view> -->
								<!-- <image src="@/wallet/static/icon-delete.svg" mode="" class="icon-fail"></image> -->
								<image src="@/wallet/static/icon-triangle.png" mode="widthFix" class="triangle"></image>
								<!-- <view class="triangle1"></view> -->
							</view>
						</view>
						<view class="inline-flex item-center" v-else>
							<text class="color-secondary-warning" v-if="item.state==1">待审核</text>
							<!-- <text class="color-primary" v-if="item.state==2">审核失败</text> -->
							<text class="color-secondary-success" v-if="item.state==3">审核成功</text>
							<text class="color-secondary-warning" v-if="item.state==4">提现中</text>
							<text class="color-secondary-success" v-if="item.state==5">提现成功</text>
							<text class="color-primary" v-if="item.state==7">待确认</text>
							<text class="color-secondary-warning" v-if="item.state==8">待打款</text>
						</view>
					</view>
					<view v-if="item.state==7" class="mt-8 flex justify-end item-center fs-12 button-wrapper">
						<button v-if="item.checkFile" plain size="mini" type="primary" @click="download(item.checkFile)">下载结算单</button>
						<button plain size="mini" class="confirm-button" type="warn" @click="showPop(true, item.checkBillId)">确认结算</button>
					</view>
				</view>
			</view>
		</z-paging>
		<uni-popup ref="popup" type="center">
			<view>
				<view class="w-pop" style="background: #ffffff;">
					<view class="base-title">结算提示</view>
					<view class="pop-text">确认结算即代表您对核算金额无异议，若存在疑议或其他问题，请联系客服处理</view>
					<view class="flex item-center btn-box">
						<button class="cancal-btn" open-type="contact" @click="showPop(false)">有疑议</button>
						<view class="submit-btn" @click="submit">确认结算</view>
					</view>
				</view>
			</view>
		
		</uni-popup>
	</view>
</template>

<script setup name="WithdrawRecord">
	import {ref,onMounted,computed,reactive} from 'vue'
	import {
		withdrawalPage,
		checkBillConfirm
	} from '@/wallet/api/withdrawal.js'
	import {useUserStore} from '@/stores/modules/user.js'
	const userStore = useUserStore()
	let userInfo = userStore.userInfo
	const goBack = () => uni.navigateBack()
	const list = ref([])
	const paging = ref()
	let menuList = reactive([{
			name: '本金提现',
			id: 1
		},
		{
			name: '补贴提现',
			id: 3
		}
	])
	const params = ref({
		pageNum: 1,
		pageSize: 15,
		withdrawalTypes: 1
	})
	let checkBillId = ''
	const popup = ref()
	const showre = (item) => {
		// console.log(111,item)
		list.value.forEach(obj => {
			obj.show = false
		})
		if(item){
			// item.show = !item.show  ?true:false
			item.show = !item.show && item.refuseReason ?true:false
		}
	}
	const changeMenu = (item) => {
		params.value.withdrawalTypes = item.id
		list.value = []
		getList(1)
	}
	const getList = async (num) => {
		params.value.pageNum = num
		uni.showLoading()
		let result = await withdrawalPage({
			...params.value
		})
		if (result) {
			paging.value.complete(result.list)
			// list.value = //params.value.pageNum == 1 ? result.list : (list.value).concat(result.list)
			// total.value = result.total
		}
		uni.hideLoading()
	}
	const showPop = (value, id) => {
		if(value){
			checkBillId = id
			popup.value && popup.value.open('center')
		}else{
			popup.value && popup.value.close()
		}
	}
	const submit = ()=>{
		uni.showLoading()
		checkBillConfirm({checkBillId}).then((res)=>{
			uni.showToast({
				icon:'none',
				title:'确认成功'
			})
			showPop(false)
			getList(1)
		}).catch(err => {
			uni.hideLoading()
			uni.showToast({
				icon:'none',
				title:err.message
			})
		})
	}
	const download = (url) => {
		uni.showLoading()
		uni.downloadFile({
			url: url,
			success: (res) => {
				if (res.statusCode === 200) {
					wx.shareFileMessage({
						filePath: res.tempFilePath,
						success() {},
						fail: console.error,
					  })
				}
			},
			complete: () => {
				uni.hideLoading()
			}
		});
	}
	
</script>
<style scoped lang="scss">
	.top-tip{
		padding: 16rpx 32rpx;
		background: #FFE9B7;
		color: #333333;
		font-size: 24rpx;
		margin-bottom: 24rpx;
	}
	.down-text{
		color: #00AEFF;
		text-decoration-line: underline;
		margin-left: 16rpx;
	}
	.button-wrapper{
		button{
			margin: 0;
			&.confirm-button{
				margin-left: 32rpx;
			}
		}
	}
	.pop-text{
		color: #898989;
		margin: 16rpx 32rpx;
		text-align: center;
	}
	.fail-box{
		position: relative;
		.fail-box-pop{
			// display: inline-block;
			position: absolute;
			// left: 0;
			right: -12px;
			// margin: auto;
			top: 31px;
			width: 124px;
			border: 2px solid rgba(250, 69, 67, 1);
			background-color: rgba(255, 238, 238, 1);
			 // word-wrap: break-word;
			 border-radius: 8px;
			 padding: 8px;
			 font-family: PingFang SC;
			 font-size: 12px;
			 font-weight: 400;
			 line-height: 14px;
			 display: flex;
			 
			 justify-content: center;
			 
			 align-items: center;
			 
			 display: flex;
			 
			 justify-content: center;
			 
			 align-items: center;
			 z-index:2;
		}
		.icon-fail{
			height: 14px;
			width: 14px;
			margin-left: 4px;
			margin-top: 4px;
		}
		.triangle{
			// width: 0;
			// height: 0;
			width: 14px;
			height: 7px;
			position: absolute;
			top: -8px;
			left: 0;
			right: 0;
			margin: auto;
			// border-radius: 4px;
			// border-left: 4px solid transparent; /* 左边透明 */
			// border-right: 4px solid transparent; /* 右边透明 */
			// border-bottom: 12px solid rgba(255, 238, 238, 1); /* 底部为黑色线条 */
			z-index: 2;
		}
		.triangle1{
			// width: 0;
			// height: 0;
			position: absolute;
			top: -8px;
			left: 0;
			right: 0;
			margin: auto;
			.radius2{
				fill: rgba(250, 69, 67, 1);
				stroke: rgba(250, 69, 67, 1);
				stroke-width: 60;
			}
			// border-left: 4px solid transparent; /* 左边透明 */
			// border-right: 4px solid transparent; /* 右边透明 */
			// border-bottom: 8px solid rgba(250, 69, 67, 1); /* 底部为黑色线条 */
		}
		.inner-w{
			width: 110px;
		}
		// .icon-delPop{
		// 	width: 124px;
		// 	height: 44px;
		// 	border: 1px solid rgba(250, 69, 67, 1);
		// }
	}
	.w-pop {
		background: #fffff;
		border-radius: 8px;
		padding: 20px 0px 0 0px;
		width: 320px;
	}
	
	.base-title {
		font-size: 20px;
		font-weight: 600;
		line-height: 28px;
		margin-bottom: 10px;
		text-align: center;
	}
	.btn-box {
		button{
			border-radius: none;
			border: none;
			background-color: #fff;
		}
		border-top: 1px solid rgba(0, 0, 0, 0.1);
		margin-top: 20px;
		line-height: 40px;
	}
	
	.cancal-btn {
		background: #fff;
		width: 50%;
		font-family: PingFang SC;
		font-size: 16px;
		font-weight: 400;
		text-align: center;
		color: rgba(51, 51, 51, 0.6);
	}
	
	.submit-btn {
		width: 50%;
		border-left: 1px solid rgba(0, 0, 0, 0.1);
		font-family: PingFang SC;
		font-size: 16px;
		font-weight: 400;
		text-align: center;
		color: #00AEFF;
	}
	.menu-item {
		margin: 10px 0 4px;
		padding: 10px 0;
		color: rgba(51, 51, 51, 0.6);
		position: relative;
		&:first-child{
			margin-right: 88px;
		}
		&.active {
			color: #333333;
		}
	
		.sel-line {
			position: absolute;
			width: 19px;
			height: 4px;
			border-radius: 4px;
			background: #FA4543;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
		}
	}
</style>